<template>
	<view class="">
		<view class="fenxiang-box">
			<view class="main-box">
				<view class="qrcode-box">
					<tki-qrcode
						ref="qrcode"
						cid="cid"
						:val="qrc.val"
						:size="qrc.size"
						:unit="qrc.unit"
						:background="qrc.background"
						:foreground="qrc.foreground"
						:pdground="qrc.pdground"
						:icon="qrc.icon"
						:iconSize="qrc.iconsize"
						:lv="qrc.lv" 
						:onval="qrc.onval"
						:loadMake="qrc.loadMake"
						:usingComponents="!0"
						@result="qrR" />
					<view class="qr-detail">
						<view class="">你的邀请码</view>
						<view class="" style="font-weight: bold;font-size: 50rpx;">{{uno}}</view>
						<view class="" @click="copy(qrc.val)" style="background-color: #8800b2;display: inline-block;color: #fff;padding: 0 20rpx;border-radius: 20rpx;">复制邀请码</view>
					</view>
				</view>
				
				<view class="huodong-xiangqing">
					<h3 style="color: #8800b2;text-align: center;">邀请好友</h3>
					<view class="detail">
						
						<view class="">
							<h4>方法1</h4>
							<view class="">长按图片保存或截屏保存，朋友扫二维码注册</view>
						</view>
					</view>
					<view class="detail">
						
						<view class="">
							<h4>方法2</h4>
							<view class="">将邀请码分享给你的好友，朋友注册时输入你的邀请码</view>
						</view>
					</view>
					<view class="detail">
						
						<view class="">
							<h4>方法3</h4>
							<view class="">复制邀请链接，发送给好友从浏览器打开注册</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/uni_modules/uni-nav-bar2/components/uni-nav-bar/uni-nav-bar.vue'
	import tabBar from '@/components/tabBar/tabBar.vue';
	import h5Copy from "@/common/h5-copy.js"
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tabBar,
			uniNavBar,
			tkiQrcode
		},
		data() {
			return{
				currentPage: "/pages/invest/hot",
				loading: !1,
				loaded: !1,
				source: 0,
				bgimage: "/static/images/qr_bg.png",
				qrc: {
					ifShow: !0,
					val: "请稍候...",
					size: 320,
					unit: "upx",
					background: "#FFFFFF",
					foreground: "#000000",
					pdground: "#000000",
					icon: "/static/qr_logo.png",
					iconsize: 40,
					lv: 3,
					onval: !1,
					loadMake: !1,
					src: ""
				},
				uno: '0',
				imgbase64val: ""
			}
		},
		onLoad: function(e) {
		    this.loadData()
		},
		methods:{
			
			loadData: function() {
				if (this.loading) return ! 1;
				this.loading = !0;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"registerQcode",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.qrc.val = res.data.data.invite_url;
					if(res.data.data.invite_code){
						this.uno = res.data.data.invite_code;
					}
					this.loading = !1;
					this.loaded = !0;
					setTimeout(()=>{
						this.$refs.qrcode._makeCode();
					},1000)
				})
			},
			qrR: function(e) {
				this.qrc.src = e;
				arguments[0] = e = this.$handleEvent();
				this.qrR.apply(void 0, arguments);
			},
			copy: function(val) {
				// #ifndef H5
				uni.setClipboardData({
					data: val
				});
				// #endif
				// #ifdef H5
				const result = h5Copy(val)
				if (result === false) {
					uni.showToast({
						title:'不支持',
					})
				} else {
					uni.showToast({
						title:'复制成功',
						icon:'none'
					})
				}
				// #endif
			},
			navToUrl: function(url) {
			    uni.navigateTo({
			        url: url
			    })
			},
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #fff;
	}
	.fenxiang-box{
		background-image: url('/static/img/aqiang/dianying.jpg');
		height: calc(100vh - 88rpx);
		width: 100%;
		box-sizing: border-box;
		display: inline-block;
		padding: 0 40rpx;
		display: flex;
		align-items: flex-end;
		.main-box{
			bottom: 0;
			width: 100%;
			.qrcode-box{
				height: 400rpx;
				background-color: #fff;
				border: 10rpx solid #ff0;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.qrcode{
					width: 160rpx;
					height: 160rpx;
					background-color: #eee;
				}
				.qr-detail{
					border-left: 1rpx solid #aaa;
					width: 50%;
					text-align: center;
					color: #8800b2;
				}
				
			}
			.huodong-xiangqing{
				height: 440rpx;
				margin: 20rpx 0;
				background-color: #fff;
				border: 10rpx solid #ff0;
				border-radius: 20rpx;
				padding: 40rpx 20rpx;
				.detail{
					font-size: 16rpx;
					display: flex;
					.icon-box{
						background-color: #eee;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}
				}
			}
		}
		
	}
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>